<template>
  <div class="content-wrapper">
    <!-- <div class="content-header"></div>
    <div class="title">
      <div>上传实操</div>
    </div>
    <el-divider></el-divider> -->
    <div class="content-container">
      <el-form :inline="true" :model="listQuery" class="filter-container">
        <el-form-item label="培训类型">
          <el-select v-model="listQuery.mode" size="mini">
            <el-option
              v-for="item in userGroupOptions"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            class="filter-item"
            size="small"
            round
            type="primary"
            icon="el-icon-search"
            @click="handleFilter"
          >
            搜索
          </el-button>
          <!-- <el-button
            class="filter-item"
            size="small"
            round
            icon="el-icon-download"
            @click="handleFilter"
          >
            导出
          </el-button> -->
          <!-- <el-button
            class="filter-item"
            size="small"
            round
            icon="el-icon-plus"
            @click="openPracticeDialog"
          >
            新增
          </el-button> -->
        </el-form-item>
      </el-form>
      <el-table
        v-loading="listLoading"
        :data="listData"
        highlight-current-row
        height="80vh"
      >
        <el-table-column label="培训名称" prop="name" width="100px" />
        <el-table-column label="培训内容" prop="content" width="200px" />
        <el-table-column label="开始时间" prop="createTime" />
        <el-table-column label="结束时间" prop="endTime" />
        <el-table-column
          label="操作"
          align="center"
          width="150px"
          fixed="right"
        >
          <template slot-scope="{ row, $index }">
            <el-dropdown trigger="click" class="filter-item">
              <el-button type="text" class="el-icon-more" />
              <el-dropdown-menu slot="dropdown" class="user-dropdown">
                <el-dropdown-item>
                  <el-popover placement="left" width="400" trigger="hover">
                    <el-table
                      class="my-popover-table"
                      :data="row.practiceRecordList"
                      row-key="practiceRecordId"
                      @row-click="viewAttachment"
                    >
                      <el-table-column
                        label="实操时长"
                        prop="practiceDuration"
                        min-width="200px"
                      />

                      <el-table-column
                        width="100"
                        property="updateTime"
                        label="更新时间"
                      />
                    </el-table>
                    <span slot="reference"> 查看 </span>
                  </el-popover>
                </el-dropdown-item>
                <el-dropdown-item @click.native="openPracticeDialog(row)"
                  >上传实操</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      :title="titleMap[dialogStatus]"
      :visible.sync="practiceDialog"
      class="mini"
      @close="closePracticeDialog"
    >
      <el-form>
        <el-row
          ><el-col :span="22">
            <el-form-item label="操作时长">
              <el-input
                v-model="practiceDuration"
                :disabled="dialogStatus == 'update'"
                size="medium"
                type="number"
                style="margin-bottom: 20px; width: 50%"
                placeholder="请输入时间，单位秒"
              />
            </el-form-item> </el-col
        ></el-row>
        <el-row
          ><el-col :span="22">
            <el-form-item label="插入附件">
              <el-upload
                v-if="dialogStatus == 'create'"
                ref="upload"
                class="upload-demo"
                accept=".jpg, .jpeg, .png"
                :action="uploadUrl"
                :on-preview="filePreview"
                :on-remove="fileRemove"
                :file-list="fileList"
                :data="paramsData"
                :headers="headers"
                :on-success="fileUploadSuccess"
                :on-change="handleChange"
                list-type="picture"
              >
                <el-button icon="el-icon-upload2" size="mini" circle />
              </el-upload>
            </el-form-item> </el-col
        ></el-row>
        <el-upload
          v-if="dialogStatus == 'update'"
          ref="upload"
          class="upload-demo upload_test"
          accept=".jpg, .jpeg, .png"
          :action="uploadUrl"
          :on-preview="filePreview"
          :on-remove="fileRemove"
          :file-list="fileList"
          list-type="picture"
          :on-change="handleChange"
        />
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="practiceDialog = false">取 消</el-button>
        <el-button
          v-if="dialogStatus == 'create'"
          :disabled="data.passFlag != 0"
          type="primary"
          @click="savePracticeRecord()"
          >保 存</el-button
        >
      </span>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import { save, get, update } from '@/api/ts/practice'
import { generate } from '@/api/gid/gid'
import { deleteAttachment } from '@/api/base/attachment'
import { listPracticalOperation } from '@/api/ts/train.js'
import { processTableTree } from '@/views/train/js/tabel_tree.js'

export default {
  components: {},
  data() {
    return {
      uploadUrl:
        process.env.VUE_APP_BASE_API + '/api/base/attachment/upload_attachment',
      titleMap: {
        create: '新增',
        update: '查看'
      },
      passFlagStatus: {
        0: '未评',
        1: '合格',
        2: '不合格'
      },
      dialogStatus: '',
      gid: null,
      listData: [],
      total: 0,
      paperOptions: [],
      userGroupOptions: [],
      passFlagOptions: [],
      listQuery: {
        // pageIndex: 0,
        // pageNumber: 1,
        // pageSize: 5,
        examinationPaperId: null,
        examineeUserGroupId: null,
        examineeUserName: null,
        passFlag: null
      },
      listLoading: false,
      practiceDialog: false,
      fileList: [],
      paramsData: {},
      headers: {},
      practiceDuration: 0,
      dialogVisible: false,
      dialogImageUrl: null,
      saveData: {
        practiceRecordId: null,
        comment: '',
        passFlag: 1
      },
      data: {
        passFlag: 0
      },
      trainId: ''
    }
  },
  mounted() {
    processTableTree().then((res) => {
      this.userGroupOptions = res.category
    })
    this.getListData()
  },
  methods: {
    saveComment() {
      update(this.saveData).then((res) => {
        this.$message.success('保存成功')
        this.practiceDialog = false
      })
    },
    viewAttachment(row) {
      console.log('qq1111111', row)
      get({ practiceRecordId: row.practiceRecordId }).then((res) => {
        this.practiceDuration = res.data.practiceDuration
        this.saveData.practiceRecordId = res.data.practiceRecordId
        this.data = res.data
        this.saveData.comment = res.data.comment
        if (res.data.passFlag != 0) {
          this.saveData.passFlag = res.data.passFlag
        }
        this.fileList = []
        if (res.data.attachmentListResult) {
          res.data.attachmentListResult.forEach((item) => {
            var data = {
              name: item.fileName,
              url: item.objectUrl
            }
            this.fileList.push(data)
            this.practiceDialog = true
            this.dialogStatus = 'update'
          })
        }
      })
    },
    closePracticeDialog() {
      this.gid = null
      this.fileList = []
      this.practiceDuration = 0
    },
    savePracticeRecord() {
      var saveData = {
        practiceRecordId: this.gid,
        practiceDuration: this.practiceDuration,
        trainId: this.trainId
      }
      save(saveData).then((res) => {
        this.practiceDialog = false
        this.$message.success('保存成功')
        this.getListData()
      })
    },
    fileUploadSuccess(res, file, fileList) {
      // 上传成功
      this.fileList.push(res.data)
    },
    filePreview(file) {
      // 文件详细查看
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    fileRemove(file, fileList) {
      // 文件删除
      deleteAttachment({ attachmentId: file.attachmentId }).then((res) => {
        this.fileList = fileList.filter((item) => {
          if (item.attachmentId != file.attachmentId) {
            return item
          }
        })
      })
    },
    openPracticeDialog(row) {
      this.trainId = row.trainId
      // 打开窗口
      generate().then((res) => {
        this.gid = res.data
        this.paramsData = {
          bizId: this.gid,
          bizType: 1
        }
        this.headers = {
          Authorization: this.$store.getters.token
        }
        this.dialogStatus = 'create'
        this.practiceDialog = true
      })
    },
    getListData() {
      // 获取实操列表数据
      listPracticalOperation({
        assess: 'assess_practical'
      }).then((res) => {
        this.listData = res.data
      })
    },
    handleFilter() {
      listPracticalOperation({
        mode: this.listQuery.mode,
        assess: 'assess_practical'
      }).then((res) => {
        this.listData = res.data
      })
    },
    handleChange(file, fileList) {
      console.log(file, fileList, 'file, fileList')
      // 上传成功
      const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1)
      const whiteList = ['jpg', 'jpeg', 'png']
      if (whiteList.indexOf(fileSuffix) === -1) {
        this.$refs.upload.uploadFiles = this.$refs.upload.uploadFiles.filter(
          (e) => {
            if (e.uid !== file.uid) {
              return true
            }
          }
        )
        this.$message.warning('上传文件只能是 jpg、jpeg、png格式')
        return
      }
    }
  }
}
</script>

<style>
.upload_test .el-icon-close {
  display: none !important;
}
.upload_test .el-upload-list__item-status-label {
  display: none !important;
}
</style>
